@import "~./atlantic/zul/less/_header.less";

.z-colorbox {
	.displaySize(inline-block, @baseWidth * 6, @buttonHeight);
	border: 1px solid @baseBorderColor;
	padding: @paddingSmall - 1;
	background: @baseBackground;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
	overflow: hidden;

	&-current {
		.displaySize(inline-block, 100%, 100%);
		position: relative;
	}

	&-button {
		.displaySize(inline-block, 12px, 12px);
		line-height: normal;
		background: @baseBackground;
		position: absolute;
		bottom: 1px;
		right: 2px;
		overflow: hidden;
	}

	&-icon {
		.iconFontStyle(@baseFontSize, @iconColor);
		position: relative;
		top: -3px;
		left: 3px;
	}

	&-disabled,
	&-disabled * {
		color: @disabledColor !important;
		.opacity(@disabledOpacity);
		cursor: default !important;
	}
}
// Popup shadow
.z-colorbox-popup,
.z-menu-popup {
	display: none;
	position: absolute;
	overflow: auto;
	z-index: @basePopupZIndex;
}
// Colorpicker
.z-colorpicker {
	.size(384px, 332px);
	border: 1px solid @baseBorderColor;
	background: @baseBackground;
	position: relative;
	overflow: hidden;

	&-gradient {
		.size(256px, 256px);
		border: 1px solid @baseBorderColor;
		position: absolute;
		left: 7px;
		top: 31px;
		cursor: crosshair;
	}

	&-overlay {
		.size(256px, 256px);
		.encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_gradient.png');
	}

	&-bar {
		.size(12px, 256px);
		border: 1px solid @baseBorderColor;
		.encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_hue.png');
		position: absolute;
		left: 7px;
		cursor: n-resize;
		overflow: hidden;
	}

	&-circle {
		.size(11px, 11px);
		margin: -5px 0 0 -5px;
		.encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_select.gif');
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	&-hue {
		.size(27px, 256px);
		position: absolute;
		top: 31px;
		left: 272px;
	}

	&-arrows {
		.size(27px, 9px);
		margin: -4px 0 0 0;
		.encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_arrows.gif');
		position: absolute;
		left: 0;
		cursor: n-resize;
		overflow: hidden;
	}

	&-color {
		border: double;
		background: transparent;
		position: absolute;
		top: 34px;
		left: 315px;
	}

	&-newcolor {
		.size(48px, 32px);
		border-bottom: 1px solid;
		position: relative;
	}

	&-current {
		.size(48px, 32px);
		border-top: 1px solid;
		position: relative;
	}

	&-r, &-g, &-b, &-h, &-s, &-v {
		width: 55px;
		position: absolute;
		left: 310px;
	}

	&-r {top: 122px;}
	&-g {top: 147px;}
	&-b {top: 172px;}
	&-h {top: 212px;}
	&-s {top: 237px;}
	&-v {top: 262px;}

	&-input {
		.size(@baseWidth * 5, 24px);
		border: 1px solid @baseBorderColor;
		padding: @paddingSmall - 1;
		background: @baseBackground;
		float: right;
	}

	&-text,
	&-input {
		.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
		line-height: 24px;
	}

	&-hex {
		position: absolute;
		top: 293px;
		left: 10px;

		.z-colorpicker-text {
			line-height: @buttonHeight;
		}
		.z-colorpicker-input {
			.size(@baseWidth * 9, @buttonHeight);
			margin-left: 5px;
			line-height: @buttonHeight;
		}
	}

	&-button {
		width: 42px;
		position: absolute;
		top: 300px;
		left: 328px;
		cursor: pointer;
	}

	&-icon {
		color: #59A755;
	}
}
// Color Palette
.z-colorpalette {
	.size(262px, 228px);
	border: 1px solid @baseBorderColor;
	padding-left: 4px;
	background: @baseBackground;

	&-newcolor {
		.size(50px, @buttonHeight);
		border: 1px solid @baseBorderColor;
		margin: 4px 2px;
		position: relative;
		left: 123px;
	}

	&-input,
	&-button {
		position: absolute;
		top: 5px;
		left: 185px;
	}

	&-input {
		.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
		.size(72px, @buttonHeight);
		border: 1px solid @baseBorderColor;
		padding: @paddingSmall;
		background: @baseBackground;
	}

	&-color {
		.displaySize(inline-block, 14px, 14px);
		border: 1px solid #FFFFFF;
		cursor: pointer;
		float: left;

		&:hover {
			border: 1px solid #000000;
		}
	}

	&-selected {
		border: 1px solid #000000;
	}
}
.z-colorbox-paletteicon,
.z-menu-paletteicon,
.z-colorbox-pickericon,
.z-menu-pickericon {
	.size(22px, 22px);
	.encodeURL(background, '~./zkex/img/colorbox/cb-buttons.gif');
	position: absolute;
	cursor: pointer;
	z-index: 10;
}
.z-colorbox-paletteicon,
.z-menu-paletteicon {
	background-position: 0 0;
	left: 6px;
	top: 5px;
}
.z-colorbox-pickericon,
.z-menu-pickericon {
	background-position: 0 -44px;
	left: 31px;
	top: 5px;
}
.z-colorpalette-popup .z-colorbox-paletteicon,
.z-colorpalette-popup .z-menu-paletteicon {
	background-position: 0 -22px;
	left: 6px;
}
.z-colorpalette-popup .z-colorbox-pickericon,
.z-colorpalette-popup .z-menu-pickericon {
	left: 31px;
}
.z-colorpicker-popup .z-colorbox-pickericon,
.z-colorpicker-popup .z-menu-pickericon {
	background-position: 0 -66px;
}

// inside toolbar
.z-toolbar .z-colorbox-button {
	bottom: -1px;
}
